<script setup>
import { ref, onMounted } from 'vue';
import router from "@/router/index.js";
import { queryAnswerById } from "@/api/answer.js";
import UserInfoComponent from "@/components/UserInfoComponent.vue";

// 定义响应式变量
const resultData = ref({});
const id = ref(0);

// 获取结果数据的函数
const getResultData = () => {
  const params = router.currentRoute.value.params;
  id.value = params.id; // 获取路由参数中的 ID
  queryAnswerById(id.value)
    .then(res => {
      if (res.data.code === 1) {
        resultData.value = res.data.data; // 将查询到的数据赋值给 resultData
      }
    })
    .catch(error => {
      console.error("Error fetching result data:", error);
    });
};

// 在组件挂载时调用获取数据的函数
onMounted(() => {
  getResultData();
});

const handleRestart = () => {
  router.push(`/app/${resultData.value.appId}`)
};
</script>

<template>
  <div id="result-page">
    <!-- 使用 a-card 组件展示数据 -->
    <a-card class="card">
      <div class="card-content">
        <!-- 全部数据描述 -->
        <a-descriptions :column="1" title="答题结果">
          <a-descriptions-item label="应用 ID">{{ resultData.appId || '未提供' }}</a-descriptions-item>
          <a-descriptions-item label="应用名称">{{ resultData.appName || '未提供' }}</a-descriptions-item>
          <a-descriptions-item label="评分类型">
            <a-tag v-if="resultData.appType === 1" color="green">测评类</a-tag>
            <a-tag v-else-if="resultData.appType === 0" color="red">得分类</a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="评分策略">
            <a-tag v-if="resultData.scoringStrategy === 1" color="blue">AI</a-tag>
            <a-tag v-else-if="resultData.scoringStrategy === 0" color="orange">自定义</a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="结果名称">{{ resultData.resultName || '未提供' }}</a-descriptions-item>
          <a-descriptions-item label="结果描述">{{ resultData.resultDesc || '未提供' }}</a-descriptions-item>
          <a-descriptions-item label="我的答案">{{ resultData.choices || '未提供' }}</a-descriptions-item>
          <a-descriptions-item label="我的得分">{{ resultData.resultScore }}</a-descriptions-item>
          <a-descriptions-item label="答题时间">{{ resultData.createTime || '未提供' }}</a-descriptions-item>
          <a-descriptions-item label="用户信息">
            <user-info-component :avatar="resultData.avatar" :nickname="resultData.nickname" :userId="resultData.userId"/>
          </a-descriptions-item>
          <a-descriptions-item label="结果图片">
            <template v-if="resultData.resultPicture">
              <img :src="resultData.resultPicture" alt="结果图片" style="max-width: 200px;">
            </template>
            <template v-else>
              无结果图片
            </template>
          </a-descriptions-item>
        </a-descriptions>

        <!-- 重新答题按钮 -->
        <div class="action-buttons">
          <a-button type="primary" long @click="handleRestart">重新答题</a-button>
          <a-button type="primary" long @click="router.push('/')">回到主页</a-button>
        </div>
      </div>
    </a-card>
  </div>
</template>

<style scoped>
.card {
  margin: 20px auto;
}

.action-buttons {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 20px;
}
</style>
